<template>
  <div class="treeStyle">
    <div class="input-contanier">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        style="margin-bottom: 20px"
        clearable
      >
      </el-input>
    </div>
    <el-scrollbar style="height: calc(100% - 82px)">
      <el-tree
        ref="tree"
        node-key="id"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        :highlight-current="true"
        :data="options"
        @node-click="handleNodeClick"
        @node-expand="nodeExpand"
        @node-collapse="nodeCollapse"
      >
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <!-- {{node}} -->
          <div>{{ node.label }}</div>
          <div class="btn">
            <slot name="btn" :scope="{ node, data }"></slot>
          </div>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
  import { apiPostOrganizTree } from '../../organization/api'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'OrgTree',
    props: {
      defaultProps: {
        type: Object,
        default: () => {
          return {
            children: 'children',
            label: 'label'
          }
        }
      },
      options: {
        type: Array,
        default: () => []
      }
    },
    data() {
      const data = []
      return {
        filterText: '',
        isExpanded: false,
        currentNode: {},
        tableData: JSON.parse(JSON.stringify(data))
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      options(val) {}
    },
    mounted() {
      // this.getTree()
    },
    methods: {
      // getTree() {
      //   apiOrgTree({}).then(res=>{
      //     if(res.code===EnumApiCode.Success){
      //       this.tableData=res.data
      //     }
      //   })
      // },
      setCurrentNode(id) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(id)
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data[this.defaultProps.label].indexOf(value) !== -1
      },
      // 选中当前层级
      handleNodeClick(data) {
        this.$emit('handleNodeClick', data)
      },
      nodeExpand() {
        this.isExpanded = true
      },
      nodeCollapse() {
        const reult = this.$refs.tree.store.root.expanded
        this.isExpanded = reult || this.isExpanded
      },
      handleExpand() {
        this.isExpanded = !this.isExpanded
        this.handleExpandNodes(this.$refs.tree.store.root)
      },
      setNodeChecked(keys) {
        if (keys?.length) {
          this.$refs.tree.setCheckedKeys(keys)
        }
      },
      // 遍历树形数据，设置每一项的expanded属性，实现展开收起
      handleExpandNodes(node) {
        node.expanded = this.isExpanded
        for (const ele of node.childNodes) {
          ele.expanded = this.isExpanded
          if (ele.childNodes.length > 0) {
            this.handleExpandNodes(ele)
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .custom-tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .treeStyle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .input-contanier {
    padding: 0 15px;
  }
</style>
<style lang="scss">
  /* element滚动条组件 隐藏水平滚动条 */

  .treeStyle .el-scrollbar__view {
    padding: 0 15px;
  }

  .treeStyle .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .is-horizontal {
    display: none;
  }
</style>
